<template>
    <div class='goods'>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" class="search-con">
                <el-row>
                    <el-col :span="24">
                        <el-form-item>
                            <el-button size="mini" v-for="item,index in btnList" :key="index" @click="changeTab(item,index)" :type="curLine==index?'primary':'default'">
                                {{item.dictLabel}}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-form-item label="优惠券标题:" prop="key_title" style="margin-right: 50px;">
                        <el-input v-model="queryParams.key_title" placeholder="请输入优惠券标题" clearable size="small" />
                    </el-form-item>
                    <el-form-item label="优惠券类型:" prop="key_type" style="margin-right: 50px;">
                        <el-input v-model="queryParams.key_type" placeholder="请输入优惠券类型" clearable size="small" />
                    </el-form-item>
                    <el-form-item label="优惠类型:" prop="key_offer_type" style="margin-right: 50px;">
                        <el-select v-model="queryParams.key_offer_type" placeholder="请选择" clearable size="small">
                            <el-option v-for="dict in offerType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="有效期类型:" prop="key_vali_type" style="margin-right: 50px;">
                        <el-select v-model="queryParams.key_vali_type" placeholder="请选择" clearable size="small">
                            <el-option v-for="dict in validType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="优惠券数量类型:" prop="key_number_type" style="margin-right: 50px;">
                        <el-select v-model="queryParams.key_number_type" placeholder="请选择" clearable size="small">
                            <el-option v-for="dict in numberType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="剩余优惠券数量:" >
                        <el-input v-model="queryParams.key_number_min" placeholder="最小" clearable size="small" style="width: 80px; margin-right: 10px;"/>
                        <span style="color: #999;height: 1px; width: 4px;">-</span>
                        <el-input v-model="queryParams.key_number_max" placeholder="最大" clearable size="small" style="width: 80px; margin-left: 10px;"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['customer:manage:export']">导出
                        </el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="22">
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd()" v-hasPermi="['customer:manage:add']">
                        新增优惠券</el-button> 
                        <!-- curRow={};title = '新增商品';handleShow = 'add'; -->
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight :height="tableList &&tableList.length > 0 ? '900px' : '120px'"
                @selection-change="handleSelectionChange" @row-click="toggleSelection">
                <!-- <el-table-column type="selection" width="55" align="center" fixed="left" /> -->
                <el-table-column label="编号" align="center" prop="id" />
                <el-table-column label="优惠券名称" align="center" prop="title" />
                <el-table-column label="优惠券类型" align="center" prop="type_name" />
                <el-table-column label="优惠类型" align="center" prop="offer_tips" />
                <el-table-column label="有效期" align="center" prop="vali_tips" />
                <el-table-column label="剩余数量" align="center" prop="residue_number" />
                <el-table-column label="已领取数量" align="center" prop="sent_number" />
                <el-table-column label="已使用数量" align="center" prop="used_number" />
                <el-table-column label="创建时间" align="center" prop="create_time" />
                <el-table-column label="状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <span>
                            {{selectDictLabel(statusList, scope.row.status)}}
                        </span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="审核状态" align="center" prop="mobile">
                    <template slot-scope="scope">
                        <span class="text-link" @click="toAudit()">审核状态审核</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <!-- @click="title='详情';customerId=String(scope.row.id);handleShow='detail'" -->
                        <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleEdit(scope.row)"
                            v-hasPermi="['marketSales:admit:edit']">
                            编辑
                        </el-button>
                        <el-button v-if="scope.row.status==0" size="mini" type="text" @click="handleAble(scope.row)" v-hasPermi="['user:staff:stop']">停用
                        </el-button>
                        <el-button v-if="scope.row.status==1 " size="mini" type="text" @click="handleAble(scope.row)" v-hasPermi="['user:staff:start']">启用
                        </el-button>
                        <el-button v-if="scope.row.number_type==1" size="mini" type="text" @click="handleNumber(scope.row)" v-hasPermi="['user:staff:start']">设置剩余数量
                        </el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">
                            删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page" :limit.sync="queryParams.limit" @pagination="getList" />

            <!-- 新增 -->
            <add v-if="handleShow=='add' || handleShow=='edit' ||handleShow=='detail'" :title="title" :handleShow="handleShow"   :data="curRow" :submitShow="submitShow"
                @close="handleShow=''" @load="getList" />
              
            <!-- <audit v-if="handleShow=='audit'" :data="stockRow" @close="handleShow=''" @load="getList" /> -->

            <el-dialog title="设置剩余数量" visible v-if="handleShow == 'change'" @close="close()" width="500px" append-to-body
                :close-on-click-modal="false">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="formLoading">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="剩余数量" prop="number">
                                <el-input style="width:215px;" v-model="form.number" placeholder="请输入剩余数量" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="close()">取 消</el-button>
                    <el-button type="primary" @click="submit" :disabled="formLoading">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { getCouponsLists, getCouponsInfo, setcouponsStatus, delcouponsInfo, setCouponsNumber} from "@/api/coupon/coupon"
import { departStatus } from "@/api/dictionary"
import add from "./handle/add"
// import audit from "./handle/auditDetails"
import throttle from 'lodash.throttle'
export default {
    name: 'goods',
    components: {
        add,
        // audit
    },
    data() {
        return {
            showSearch: true,
            loading: false,
            total: 0,
            pageCount: 0,
            queryParams: {
                page: 1,
                limit: 20,
                key_status: null,
            },
            tableList: [
                {}
            ],
            timeType: [{
                dictLabel: '发货时间',
                dictValue: 0
            },
            {
                dictLabel: '下单时间',
                dictValue: 1
            }],
            statusList: departStatus,
            offerType: [
                {
                    dictLabel: '全部',
                    dictValue: ''
                },
                {
                    dictLabel: '无条件立减',
                    dictValue: 1
                }, {
                    dictLabel: '无条件打折',
                    dictValue: 2
                },
                {
                    dictLabel: '满减优惠',
                    dictValue: 3
                }, {
                    dictLabel: '满折优惠',
                    dictValue: 4
                }
            ],
            validType: [
                {
                    dictLabel: '全部',
                    dictValue: ''
                },
                {
                    dictLabel: '无限期',
                    dictValue: 0
                }, {
                    dictLabel: '时间区间',
                    dictValue: 1
                },
                {
                    dictLabel: '有效期',
                    dictValue: 2
                }
            ],
            numberType: [
                {
                    dictLabel: '全部',
                    dictValue: ''
                },
                {
                    dictLabel: '无限量',
                    dictValue: 0
                }, {
                    dictLabel: '数量有限',
                    dictValue: 1
                }
            ],
            selectData: [],
            btnList: [
                {
                    dictLabel: '全部',
                    dictValue: ''
                },
                {
                    dictLabel: '审核通过',
                    dictValue: 1
                },
                {
                    dictLabel: '审核中',
                    dictValue: 0
                },   
                {
                    dictLabel: '审核失败',
                    dictValue: -1
                },                             
                // {
                //     dictLabel: '未通过',
                //     dictValue: 4
                // },
            ],
            curLine: 0,
            handleShow: "",
            submitShow: null,
            title: "",
            // statusShow:true,
            statusString:'',
            curRow: {},
            stockRow:{},
            form:{
                number:'',
                coupon_id:''
            },
            rules: {
                number: [{ required: true, message: '请输入剩余数量', trigger: 'blur' }],
            },
            formLoading: false,
        }
    },
    created() {
        this.getList()

    },
    methods: {
        getList() {
            this.loading = true;
            getCouponsLists(this.queryParams).then(res => {
                this.tableList = res.data ? res.data.lists : [];
                this.pageCount = res.data.pageCount;
                this.loading = false;
            });
        },
        changeTab(item,index) {
            this.curLine = index
            this.queryParams.key_exam_state = item.dictValue
            // let num = item.dictValue
            // this.statusString = num.toString()
            // if( this.statusString === '' ||  this.statusString === '1' ||  this.statusString === "-1" ){
            //     this.statusShow = true
            // }else if(this.statusString === '0'){
            //     this.statusShow = false
            // } 
            this.getList()
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出所有数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                // return exportBanner(queryParams);
            }).then((response) => {
                // this.download(response.msg);
            });
        },
        toggleSelection(row) {
            this.$refs.tableList.toggleRowSelection(row);
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.selectData = selection;
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // toDetail(row) {
        //     getGoodsInfo({ code: row.code }).then(res => {
        //         this.title = "详情"
        //         this.curRow = res.data;
        //         this.handleShow = 'detail';
        //     })
        // },
        handleNumber(row) {         
                this.handleShow = 'change';
                this.form.coupon_id = row.id
        },
        handleEdit(row) {
            getCouponsInfo({ coupon_id: row.id }).then(res => {
                this.curRow = res.data;
                this.title = "编辑"
                this.handleShow = 'edit';
                this.submitShow = false;
            })
        },
        handleAdd() { 
                this.curRow = {}
                this.title = "新增优惠券"
                this.handleShow = 'add';
        },
        handleAble(row) {
            let label = row.status == 0 ? '停用' : '启用';
            this.$confirm(`是否将“${row.name}”${label}?`, "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return setcouponsStatus({ coupon_id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess(`${label}成功`);
            })
        },
        handleDelete(row) {
            this.$confirm('是否确认删除' + '"' + row.name + '"' + '?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delcouponsInfo({ coupon_id: row.id });
            }).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            })
        },
        close() {
            this.form = {}
            this.handleShow = ""
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.formLoading = true;
                    setCouponsNumber(this.form).then(res => {
                        this.msgSuccess("操作成功！");
                        this.close()
                        this.formLoading = false;
                        this.getList();
                    }).catch(() => {
                        this.formLoading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
    },
}

</script>
<style scoped lang='scss'>
</style>